<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>image</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.5/ol.css"
        integrity="sha256-rQq4Fxpq3LlPQ8yP11i6Z2lAo82b6ACDgd35CKyNEBw=" crossorigin="anonymous"/>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.5/ol.js"
          integrity="sha256-77IKwU93jwIX7zmgEBfYGHcmeO0Fx2MoWB/ooh9QkBA="
          crossorigin="anonymous"></script>
  <style type="text/css">
    .ol-overlaycontainer-stopevent {
      display: none;
    }
  </style>
</head>
<body>
<div id="map"></div>
<script>

  var extent = [0, 0, 1920, 1200];
  var projection = new ol.proj.Projection({
    code: "xkcd-image",
    units: 'pixels',
    extent: extent
  });
  // 自定义图片
  var myImgLayer = new ol.layer.Image({
    source: new ol.source.ImageStatic({
      attributions: '© <a href="https://gitee.com/pychfarm/planar_algorithm/tree/master">平面算法</a>',
      url: 'http://i0.hdslb.com/bfs/article/156a0c13fd369e473e7074c20ab1ee79b99d7aef.jpg',
      projection: projection,
      imageExtent: extent
    })
  });

  var map = new ol.Map({
    target: 'map',
    layers: [myImgLayer],
    view: new ol.View({
      projection: projection,
      center: ol.extent.getCenter(extent),
      zoom: 2,
      maxZoom: 8
    })
  });
</script>
</body>
</html>
